﻿@using PagedList
@using PagedList.Mvc
@{
    ViewBag.Title = "图片列表";
    var paged = ViewBag.Paged as IPagedList<Guid>;
}

<div class="box">
    <div class="box-body table-responsive">
        <div class="form-inline" role="grid">
            <div class="row">
                <div class="col-xs-11">
                    <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>选择图片</span>
                        <!-- The file input field used as target for the file upload widget -->
                        <input id="fileupload" type="file" name="file" />
                        <input id="imageId" type="hidden" name="imageId" />
                    </span>
                </div>
            </div>
            <div class="row">
                <br />
            </div>
            <div class="row">
                <div class="col-xs-11">
                    <div id="progress" class="progress">
                        <div class="progress-bar progress-bar-success"></div>
                    </div>
                    <div id="result"></div>
                </div>
            </div>

            <table class="table table-bordered table-hover dataTable">
                <thead>
                    <tr role="row">
                        <th rowspan="1" colspan="1">图片url</th>
                        <th rowspan="1" colspan="1">缩略图</th>
                        <th rowspan="1" colspan="1">删除</th>
                    </tr>
                </thead>
                <tbody role="alert">
                    @foreach (var item in paged)
                    {
                        <tr>
                            <td><a target="_blank" href="@Url.Action("Raw", "Image", new { id = item })">@("http://" + Request.Url.Host + ":" + Request.Url.Port + Url.Action("Raw", "Image", new { id = item }))</a></td>
                            <td><img src="@Url.Action("Thumb", "Image", new { id = item })" /></td>
                            <td><a href="javascript:;" data-id="@item" class="btn btn-default delete"><i class="fa fa-times-circle"></i>删除</a></td>
                        </tr>
                    }
                </tbody>
            </table>
            <div class="row">
                <div class="col-xs-11">
                    @Html.PagedListPager(paged, page => Url.Action("List", new { page = page }), PagedListRenderOptions.OnlyShowFivePagesAtATime)
                </div>
            </div>
        </div>
    </div>
</div><!-- /.box-body -->
@section Scripts{
    <script>
        $(function () {
            $('.dataTable').on('click', '.delete', function () {
                if (!confirm('确定删除吗？')) {
                    return false;
                }

                var $el = $(this);
                var id = $el.data('id');
                $.post('@Url.Action("Delete")', { id: id }, function () {
                    $el.closest('tr').remove();
                });
            });
        });

        function uploadCallback() {
            location.reload(true);
        }
    </script>
}
